import { useEffect, useState } from "react";

const PositionInputDemo = () => {
  let [x, setX] = useState(0)
  let [y, setY] = useState(0)
  useEffect(() => {
    console.log('mount only', `x=${x}, y=${y}`)
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])
  useEffect(() => {
    console.log('mount, update x only', `x=${x}`)
  }, [x])
  useEffect(() => {
    console.log('mount, update y only', `y=${y}`)
  }, [y])
  useEffect(() => {
    console.log('mount, update x y both', `x=${x}, y=${y}`)
  }, [x, y])

  return (
    <div>
      <h3>x={x}, y={y}</h3>
      <div><label>x: <input type="text"
        onChange={e => { setX(+e.target.value || 0)}}
      /></label></div>
      <div><label>y: <input type="text"
        onChange={e => { setY(+e.target.value || 0)}}
      /></label></div>
    </div>

   );
}

export default PositionInputDemo;